<template>
  <div class="ChoiceQues">
    <div class="option" v-for="(option, index) in options" :key="option.id">
      选项{{ String.fromCharCode(65 + index) }}:
      <span
        class="iconfont icon-shanchu"
        @click="deleteOption(index)"
        v-if="options.length > 2"
      ></span>
      <WangEditor ref="optionContent"></WangEditor>
    </div>
    <div class="iconfont icon-jia" @click="addOption()"></div>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import WangEditor from './WangEditor.vue'

const options = ref([
  { id: 1, content: '' },
  { id: 2, content: '' },
])
const optionContent = ref('optionContent')

function deleteOption(index) {
  options.value = options.value.filter((_, n) => n !== index)
}
function addOption() {
  options.value.push({
    id: Date.now(), // 使用时间戳保证唯一性
    content: '',
  }) //options.value = options.value.push('') ❌
}

defineExpose({
  optionContent,
})
</script>

<style lang="less" scoped>
.ChoiceQues {
  .icon-jia {
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
  }
}
</style>